網頁地圖資料格式 web map data formats

11th鐵人賽

owlfox

2019-10-04 09:40:47

1986 瀏覽

分享至

今天我們說說地圖可能會用到的資料格式及程式介面。

JSON

JSON 是 JavaScript Object Notation 的縮寫，在網頁開發中相當流行的資料交換格式，範例如下：

{
    "menu": {
      "id": "file",
      "value": "File",
      "popup": {
        "menuitem": [
          {"value": "New", "onclick": "CreateNewDoc()"},
          {"value": "Open", "onclick": "OpenDoc()"},
          {"value": "Close", "onclick": "CloseDoc()"}
        ]
      }
    }
}

你可以把上面這段資料直接貼到開發者工具的 console 裡，他可以直接讀取成一個 JS 的物件。

經緯度、座標系統

真實世界的地球是個橢圓形，隨著量測技術的進步我們對實際的半徑、長軸、短軸都有了更精確的量測。
經緯度是以地球中心爲基準用兩個角度來表示我們的所在位置，不同橢圓軸長下會代表不同位置。單單一個台灣就用了許多不同的座標系統：WGS84, TWD67, TWD97。
埔里的地理中心，同個地點可以計算出不同的經緯度：

TWD67 120°58'　25.9750" 23°58'　32.3400"
TWD97 120°58'　55.2886" 23°58'　25.9486"

如果登山遇到山難，請確定自己的GPS定位系統的座標系統。

TWD97: Taiwan Datum 1997

TWD67 訂定埔里虎子山爲台灣的地理中心。
據說TWD97跟WGS84幾乎一樣

ref:
http://www.sunriver.com.tw/grid_tm2.htm
https://www.keepon.com.tw/thread-a3e8e9bd-17d8-e411-93ec-000e04b74954.html?AspxAutoDetectCookieSupport=1

地圖

將橢圓的地球投影到平面的紙/網頁上。常見的有 Mercator 投影，這個投影的好處是我們在地圖上量測的角度跟真實世界是非常接近的(conformal)，在過去航海上得到廣泛使用。

但是缺點就是高緯度地區變形非常嚴重，上圖中的圓圈依據 Tissot Index 繪出，圓愈大代表該地區被放大得愈嚴重。以下是維基百科上動畫闡述此種投影造成各國家實際大小的變形比例。

因為在靠近兩極的變形太嚴重，通常只會取小於85°這個區間，有趣的是這樣我們的地圖會剛好是正方形，在製作不同解析度的圖層也方便。諸多網頁地圖如Google, open street map就是採用 Web Mercator 作為投影方式。

另外因為經緯度計算距離有點麻煩，通常除了經緯度，地圖也會表示另外一種座標：Universal Transverse Mercator ，UTM 座標系統。下圖可以看到我們在緯度高、近兩側的地方會有很多變形，為了降低誤差不同地區會各自以適合的經度線、赤道作為基準，重新做一次投影，然後將地圖上的位置以正整數(x,y)表現。

台灣曾經有採用UTM六分、三分度及最近使用的二分度法。因為台灣剛好在經度線的邊邊，改變主要為了降低不同經線作為基準時讀圖造成的誤差。

這裡其實我覺得很亂，可以的話之後寫點程式來驗證（待辦）。

山難的時候要確定你的 x y 座標是用哪個等分度

ref:
https://gisgeography.com/utm-universal-transverse-mercator-projection/
https://courses.edx.org/courses/course-v1:ETHx+WC-02x+3T2018/courseware/934c87d4c21c4c6698c6f821244174ef/0903f553f22d4ba1a8de89197c752193/
https://en.wikipedia.org/wiki/Mercator_projection#Web_Mercator

GEOJSON

規範地圖上常用的資料如點、線、多邊形，與 JSON 格式相容，範例：

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

最新版的是 2016 年的 rfc7946
。

RFC, Request for Comments 是網際網路工程任務組（英語：Internet Engineering Task Force，縮寫：IETF) 發行的文件。諸多協議如 HTTP, ICMP, TCP 皆源自此組織公開討論之結果。

TOPOJSON

GEOJSON的擴充，不同集合物件共用的線不會在一個檔案裡多次出現，可以節省很多空間。

地圖圖層

PNG, GIF 支援透明圖層。因為我們時常需要在地圖上疊上不同的資訊，地圖服務時常採用此類格式。
圖層服務 tile service
當你用瀏覽器打開 https://a.tile.openstreetmap.org/3/4/2.png 的時候會看到以下圖片，這是 open street map 提供給大眾使用的圖層伺服器，你可以看到 url 裡面有 3 4 2 的數字，分別是代表不同縮放及XY座標，API 說明詳見 https://wiki.openstreetmap.org/wiki/Tile_servers

SVG, CANVAS

網頁瀏覽器除了上述的圖檔之外也支援這兩個 element
Scalable Vector Graphics (SVG) 是其中一種，他是一個 dom 的物件，我們可以在執行期間修改他，另外自動在我們縮放的時候重繪，保有圖形細節，在後續的 d3 介紹中再多提一些...
canvas / 畫布，則跟 SVG 不同，我們要透過 JS 程式碼在 canvas 上繪圖，畫完之後沒法透過 dom 來修改，只能清掉重畫。但如果我們要顯示大於五百個物件，通常需要透過 canvas 及 GPU 相關的套件才可達成，之後我們會舉例子（待辦）。